<script setup lang="ts">
import TitleBarBtnGroup from "./TitleBarBtnGroup.vue";
import WindowContainer from "./WindowContainer.vue";
import { ref } from "vue";
import { register } from "../api";
import { useRouter } from "vue-router";

const router = useRouter();
const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const email = ref('');
const isRegistering = ref(false);
const snackVisible = ref(false);
const snackMsg = ref('');

const errors = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: ''
});

const validateForm = () => {
  errors.value = {
    username: '',
    password: '',
    confirmPassword: '',
    email: ''
  };

  let isValid = true;

  if (!username.value.trim()) {
    errors.value.username = '用户名不能为空';
    isValid = false;
  } else if (username.value.length < 3) {
    errors.value.username = '用户名至少3个字符';
    isValid = false;
  }

  if (!password.value) {
    errors.value.password = '密码不能为空';
    isValid = false;
  } else if (password.value.length < 6) {
    errors.value.password = '密码至少6个字符';
    isValid = false;
  }

  if (password.value !== confirmPassword.value) {
    errors.value.confirmPassword = '两次输入的密码不一致';
    isValid = false;
  }

  if (!email.value) {
    errors.value.email = '邮箱不能为空';
    isValid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    errors.value.email = '请输入有效的邮箱地址';
    isValid = false;
  }

  return isValid;
};

const submit = async () => {
  if (!validateForm()) {
    return;
  }

  isRegistering.value = true;
  
  try {
    const response = await register(username.value, password.value, email.value);
    
    if (response.data.code === 200) {
      showSnackBar('注册成功！正在跳转到登录页面...');
      setTimeout(() => {
        router.push('/login');
      }, 2000);
    } else {
      console.log(response);
      showSnackBar(response.data.msg || '注册失败，请重试');
    }
  } catch (error) {
    console.error('注册错误:', error);
    showSnackBar('注册失败，请检查网络连接');
  } finally {
    isRegistering.value = false;
  }
};

const goToLogin = () => {
  router.push('/login');
};

const showSnackBar = (msg: string) => {
  snackMsg.value = msg;
  snackVisible.value = true;
};
</script>

<template>
  <window-container>
    <div class="register-window">
      <v-snackbar v-model="snackVisible" :timeout="3000">
        {{ snackMsg }}
      </v-snackbar>
      
      <div class="title-bar" data-tauri-drag-region>
        <div class="title" data-tauri-drag-region>注册</div>
        <TitleBarBtnGroup :exit-on-close="true"></TitleBarBtnGroup>
      </div>
      
      <v-card title="WeCheat" style="margin-bottom: 30px" text="欢迎加入 WeCheat" color="green"></v-card>
      
      <div class="register-form">
        <v-form @submit.prevent="submit">
          <v-text-field
            v-model="username"
            variant="solo-filled"
            placeholder="请输入用户名"
            label="用户名"
            clearable
            :error-messages="errors.username"
            required
          ></v-text-field>
          
          <v-text-field
            v-model="email"
            variant="solo-filled"
            placeholder="请输入邮箱"
            label="邮箱"
            type="email"
            clearable
            :error-messages="errors.email"
            required
          ></v-text-field>
          
          <v-text-field
            v-model="password"
            variant="solo-filled"
            placeholder="请输入密码"
            label="密码"
            type="password"
            clearable
            :error-messages="errors.password"
            required
          ></v-text-field>
          
          <v-text-field
            v-model="confirmPassword"
            variant="solo-filled"
            placeholder="请确认密码"
            label="确认密码"
            type="password"
            clearable
            :error-messages="errors.confirmPassword"
            required
          ></v-text-field>
          
          <v-btn
            width="400"
            color="green"
            height="40"
            @click="submit"
            :loading="isRegistering"
            :disabled="isRegistering"
          >
            {{ isRegistering ? '注册中...' : '注册' }}
          </v-btn>
          
          <div class="login-link">
            <span>已有账号？</span>
            <v-btn variant="text" color="primary" @click="goToLogin">立即登录</v-btn>
          </div>
          
          <v-container>
            <v-checkbox label="我同意 WeCheat 的使用条款" required></v-checkbox>
          </v-container>
        </v-form>
      </div>
    </div>
  </window-container>
</template>

<style scoped lang="scss">
.register-window {
  background: white;
  height: 100%;
  
  .title-bar {
    background: #eee;
    display: flex;
    align-items: center;
    
    .title {
      flex: 1;
      text-align: center;
      padding-left: 10px;
    }
  }

  .register-form {
    text-align: center;
    width: 400px;
    margin: 30px auto 0;
    
    .login-link {
      margin: 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
    }
  }
}
</style> 